﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>lhgdialog - samples</title>
	<link href="examples.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="lhgcore.min.js"></script>
	<script type="text/javascript" src="lhgdialog.js"></script>
	
<!--代码高亮-->
<link rel="stylesheet" href="highlight/styles/magula.css">
<script src="highlight/highlight.pack.js"></script>
<script src="highlight/languages/javascript.js"></script>
<script type="text/javascript">
hljs.tabReplace = '    ';
hljs.initHighlightingOnLoad();

function opdlg( id )
{
	var dlg = new J.dialog({ id:id, title:'测试页', html:'<p style="font-size:14px;text-align:center;margin-top:50px;color:#000;">欢迎使用lhgdialog弹出窗口插件</p>', rang:true }).ShowDialog();
}

J(function(){
    J('#btn2').dialog({ id:'test2', page:'value/content.html', cover:true  });
});
</script>
	
</head>

<body>

<div id="main">

<div class="tabContent">
	<h2>弹出窗口插件介绍</h2>
	<p><strong>&copy;lhgdialog 是一个使用简单，代码简洁高效且功能强大的弹出窗口插件。</strong></p>
	<div class="about">
	    <h3>专为大型弹出窗口定制</h3>
		<p>相对于网上其它弹出窗口插件主要功能是提示信息来说，本插件主要是用来制作窗口中内容较多，页面比较复杂的窗口。本插件的窗口内容面主要是以嵌入iframe框架为主，内容页为一个单独的页面。这样就可以更方便的管理内容页，页面的样式也不受其它页面的影响，而且内容页可以是静态或动态的任何一种文件。</p>
		<h3>强大灵活的接口机制</h3>
		<p>由于本插件主要是用来制作大型的窗口，页面和窗口间的交互肯定会非常频繁，所以本插件提供了丰富的交互控制接口，可以非常方便的进行页面间的数据的传输。</p>
		<h3>完美的jQuery插件</h3>
		<p>由于本插件所需的lhgcore.min.js库文件就相当于一个精简的jQuery库，所以本插件的代码的书写方式和jQ的一样精简。如果您想把它做的jQ的插件，只要在页面引入jQuery的库（此时不再需要引入lhgcore.min.js库文件），代码作一下非常简单的修改即可。</p>
		<h3>跨浏览器兼容</h3>
		<p>兼容：IE6+、Firefox、Chrome、Safari、Opera，浏览器版本越高体验越好。并且IE6下也能支持现代浏览器的静止定位(fixed)，支持覆盖下拉控件。</p>
	</div>
	<h2>使用帮助</h2>
	<h3>调用方式</h3>
	<p style="font-size:14px;">一、使用传统的函数方法调用</p>
	<div id="demoCode01">
	    <pre><code class="javascript">function opdlg( id ){
	var dlg = new J.dialog({
	    id: id,
		title: '测试页',
		html: '欢迎使用lhgdialog弹出窗口插件',
		rang: true
	});
    dlg.ShowDialog();
    // 或者这样写	
	var dlg = new J.dialog({ id: id, ... }).ShowDialog();
}</code></pre>
		<p class="buttons"><button class="runCode" id="btn1" title="btn1" name="demoCode01" onclick="opdlg('test1')">运行&raquo;</button></p>
	</div>
	<p style="font-size:14px;">二、使用jQ方式调用</p>
	<div id="demoCode02">
	    <pre><code class="javascript">J('#btn2').dialog({ id:'test2', page:'value/content.html', cover:true });</code></pre>
		<p class="buttons"><button class="runCode" id="btn2" title="btn2" name="demoCode02">运行&raquo;</button></p>
	</div>
	<p style="font-size:14px;">接下来将有几个表格列举lhgdialog的全部功能，你需要的时候可以使用它们。</p>
	<h3>配置参数</h3>
	
<table class="zebra">
  <colgroup>
  <col class="col1">
  <col class="col2">
  <col class="col3">
  <col class="col4">
  </colgroup>
  <thead>
    <tr>
      <th class="parameter">名称</th>
      <th class="type">类型</th>
      <th class="default">默认值</th>
      <th class="note">描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="separate" colspan="4"><abbrev>内容</abbrev></th>
    </tr>
    <tr>
      <th>title</th>
      <td>字符串</td>
      <td>'lhgdialog弹出窗口'</td>
      <td>标题内容。</td>
    </tr>
    
    <tr class="odd">
      <th>page</th>
      <td>字符串</td>
      <td>null</td>
      <td>窗口的内容页为一个单独的页面文件，这个文件的路径是内容页面文件相对于调用窗口插件的路径或也可使用绝对路径。如果此参数的值为不同域的外部链接，那一定要使下面的link参数为真</td>
    </tr>
	
    <tr>
      <th>link</th>
      <td>布尔</td>
      <td>false</td>
      <td>是否为外部链接，如果是此参数一定要为真，不然程序会出错</td>
    </tr>
	
    <tr class="odd">
      <th rowspan="2">html</th>
      <td>字符串</td>
      <td rowspan="2">null</td>
      <td rowspan="2">窗口的内容页为HTML代码，可以是HTML代码或DOM对象</td>
      </tr>
    <tr>
      <td>对象</td>
    </tr>
    
    <tr>
      <th class="separate" colspan="4"><abbrev>尺寸</abbrev></th>
    </tr>
    <tr>
      <th>width</th>
      <td>数值</td>
      <td>400</td>
      <td>设置内窗口的宽度</td>
      </tr>
    
    <tr class="odd">
      <th>height</th>
      <td>数值</td>
      <td>300</td>
      <td>设置窗口的高度</td>
      </tr>
    
    <tr>
      <th class="separate" colspan="4"><abbrev>位置</abbrev></th>
    </tr>
    <tr>
      <th>fixed</th>
      <td>布尔</td>
      <td>false</td>
      <td>开启静止定位</td>
    </tr>
    <tr class="odd">
      <th rowspan="2">left</th>
      <td>数值</td>
      <td rowspan="2">'center'</td>
      <td rowspan="2">X轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'left'、'center'、'right'这些关键字</td>
      </tr>
    <tr>
      <td>字符串</td>
      </tr>
    <tr>
      <th rowspan="2">top</th>
      <td>数值</td>
      <td rowspan="2">'center'</td>
      <td rowspan="2">Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字</td>
      </tr>
    <tr class="odd">
      <td>字符串</td>
    </tr>
    <tr>
      <th class="separate" colspan="4"><abbrev>高级</abbrev></th>
    </tr>
    <tr class="odd">
      <th>id</th>
      <td>字符串</td>
      <td>'lhgdlgId'</td>
      <td>自定义对话框ID属性，要保证在页面中是唯一的，不能和页面中任何元素的id相同</td>
    </tr>
    <tr>
      <th>cover</th>
      <td>布尔</td>
      <td>false</td>
      <td>开启锁屏。中断用户对话框之外的交互，用于显示非常重要的操作/消息</td>
    </tr>
    <tr class="odd">
      <th>drag</th>
      <td>布尔</td>
      <td>true</td>
      <td>是否允许用户拖动对话框</td>
    </tr>
    <tr>
      <th>resize</th>
      <td>布尔</td>
      <td>true</td>
      <td>是否允许拖动改变窗口大小</td>
    </tr>
	
    <tr class="odd">
      <th>rang</th>
      <td>布尔</td>
      <td>true</td>
      <td>是否限制挪动与定位范围</td>
    </tr>
    <tr>
      <th>SetTopWindow</th>
      <td>对象</td>
      <td>null</td>
      <td>指定窗口弹出时的页面的window对象，如果是在框架中，你可以指定框架中的任意页面，如不指定则在框架的最顶层页面弹出</td>
    </tr>
    <tr class="odd">
      <th>regDragWindow</th>
      <td>数组</td>
      <td>null</td>
      <td>注册拖动的页面的window对象数组，这个参数的作用就是拖动时如果滑过没注册的页面时会有停顿的感觉</td>
    </tr>
    <tr>
      <th>parent</th>
      <td>对象</td>
      <td>null</td>
      <td>子窗口的父窗口对象，此参数只用在弹出的窗口中再弹出子窗口时指定父窗口对象，具体使用方法参照示例</td>
    </tr>
    <tr class="odd">
      <th>cusfn</th>
      <td>函数</td>
      <td>null</td>
      <td>自定义函数，注意：只有内容页参数为html时，此参数才可以使用，而使用page参数时此参数不可用</td>
    </tr>
  </tbody>
</table>

    <p style="font-size:14px;">需要对弹出后的对话框操作？下面介绍的就是lhgdialog的控制接口了。</p>	
	<p style="font-size:14px;">每次生成一个对话框后，它都会返回控制接口，如调用关闭接口，我们可以先定义一个变量引用对话框返回值：</p>
<pre><code class=" javascript">var testDialog = J.dialog({
	id: 'testDialog01',
    html: '我初始化后会返回控制接口，请注意接收'
});
</code></pre>
		<p style="font-size:14px;">然后在可以在其他地方调用"cancel"方法关闭对话框：</p>
<pre><code class=" javascript">testDialog.cancel();</code></pre>
		<p style="font-size:14px;">如果使用page参数，则要在内容页中引入 frameElement.lhgDG 这个接口对象，例如我示例中的content.html这个内容页示例：</p>
<pre><code class=" javascript">var dg = frameElement.lhgDG;
dg.addBtn( 'close', '取消', dg.cancel );
//这里调用了增加按钮的方法，窗口增加了个取消按钮，此按钮调用了窗口的关闭的方法：cancel()
});
</code></pre>
		<p style="font-size:14px;">好了，介绍了控制接口的用途，下面就是控制接口列表：</p>
	<h3>控制接口</h3>
<table class="zebra">
  <colgroup>
  <col class="col1">
  <col class="col2">
  <col class="col3">
  </colgroup>
  <thead>
    <tr>
      <th class="name">名称</th>
      <th class="return">返回值</th>
      <th class="note" colspan="3">描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>cancel()</th>
      <td>null</td>
      <td colspan="3">关闭对话框</td>
    </tr>
    <tr class="odd">
      <th>reDialogSize(width,height)</th>
      <td>null</td>
      <td colspan="3">重新指定窗口的大小</td>
    </tr>
    <tr>
      <th>addBtn(id,txt,fn)</th>
      <td>null</td>
      <td colspan="3">创建新的按钮</td>
    </tr>
    <tr class="odd">
      <th>removeBtn(id)</th>
      <td>null</td>
      <td colspan="3">移除窗口中的按钮</td>
    </tr>
    <tr>
      <th>dg</th>
      <td>{Object}</td>
      <td colspan="3">窗口元素DOM对象，可通过此对象对窗口和窗口内元素进行操作</td>
    </tr>
    <tr class="odd">
      <th>topWin</th>
      <td>{Object}</td>
      <td colspan="3">弹出窗口所在的顶层页面的window对象</td>
    </tr>
    <tr>
      <th>topDoc</th>
      <td>{Object}</td>
      <td colspan="3">弹出窗口所在的顶层页面的document对象</td>
    </tr>
    <tr class="odd">
      <th>curWin</th>
      <td>{Object}</td>
      <td colspan="3">加载弹出窗口插件的页面的window对象</td>
    </tr>
     <tr>
      <th>curDoc</th>
      <td>{Object}</td>
      <td colspan="3">加载弹出窗口插件的页面的document对象</td>
    </tr>
    <tr class="odd">
      <th>dgWin</th>
      <td>{Object}</td>
      <td colspan="3">如果参数为page，且link参数不为真，那这个就是内容页的window对象</td>
    </tr>
     <tr>
      <th>dgDoc</th>
      <td>{Object}</td>
      <td colspan="3">如果参数为page，且link参数不为真，那这个就是内容页的document对象</td>
    </tr>
  </tbody>
</table>
	
    <h3>jQuery + lhgdialog</h3>
	<p style="font-size:14px;">lhgdialog也可以作为为jQuery的一个插件，首先要引入jQuery的库文件（此时不再需要引入lhgcore.min.js库文件），然后有个地方要改一下，就是lhgdialog.js文件的最后小括号里的代码lhgcore要改成jQuery，修改方法： })(lhgcore)改成 })(jQuery)，方法与参数同上。调用示例：</p>
<pre><code class=" javascript">// 普通调用
function opdlg( id )
{
    var dlg = new $.dialog({ id: id, ... }).ShowDialog();
}
// 使用jQuery选择器
$('#btn').dialog({ id:'test2', page:'content.html', cover:true });</code></pre>
	<h2>演示</h2>
	<p style="font-size:14px;font-weight:bold;line-height:150%;">窗口内容页间的传值：<a href="value/value.html" target="_blank">value/value.html</a><br />跨框架下常用方法演示：<a href="frameset/iframeTop.html" target="_blank">frameset/iframeTop.html</a></p>
	<h2>下载</h2>
	<p style="font-size:14px;">下载：<a href="http://files.cnblogs.com/lhgstudio/lhgdialog.rar" target="_blank">http://files.cnblogs.com/lhgstudio/lhgdialog.rar</a></p>
	<p style="font-size:14px;">Code license: <br /><a href="http://www.gnu.org/licenses/lgpl.html" target="_blank">GNU Lesser General Public License</a></p>
	<h2>应用到你的项目</h2>
	<p style="font-size:14px;">在页面head引入二个js文件。</p>
	<pre><code class="javascript">&lt;script type="text/javascript" src=&quot;lhgcore.min.js&quot;&gt;&lt;/script&gt;<br/>&lt;script type="text/javascript" src=&quot;lhgdialog.min.js&quot;&gt;&lt;/script&gt;</code></pre>
	<p style="font-size:14px;">注：lhgcore.min.js一定要在lhgdialog.min.js前引入</p>
	<h2>捐赠</h2>
	<p style="font-size:14px;">如果您认为 lhgdialog 对您有所帮助，可以用任何方式资助我们，我们愿意接受来自各方面的捐赠。</p>
	<p style="font-size:14px;"><a href="http://www.alipay.com/" target="_blank"><img src="alipay.jpg" alt="支付宝" /></a><br />
  帐号：<span id="alipay">lhgpay@126.com</span></p>
    <h2>联系</h2>
<p style="font-size:14px;">如果你对lhgdialog有什么意见建议可以用下面任意一种联系方式找到我。lhgdialog一直在不断完善自身，这个愉悦的过程中感谢有你的参与～</p>
<p style="font-size:14px;">
作者：李惠刚<br />
邮箱：lhg133@126.com<br />
网站：<a href="http://www.cnblogs.com/lhgstudio" target="_blank">http://www.cnblogs.com/lhgstudio</a><br />
QQ：34596187 QQ群：72997291<br />
注：此说明文档模板参照artDialog说明文档模板
</p>

</div>
	
</div>

</body>
</html>